<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" title="查看服务费桌台">
    <div class="dialog-box">
      <div class="tis">
        <el-text>{{ dialogProps.row.name }}-</el-text>
        <el-text>{{ dialogProps.row.ruleType }}-</el-text>
        <el-text>{{ dialogProps.row.rule }}</el-text>
      </div>
      <div class="tis">
        <el-text class="text-Bold">共 {{ dialogProps.row.deskCount }} 个桌台</el-text>
      </div>
      <div v-for="(zt, ztx) in dialogProps.row.deskList" :key="ztx">
        <div class="tis">
          <el-text class="text-Bold">{{ zt.deskCategoryName }}</el-text>
        </div>
        <div class="tis" v-for="(im, imx) in zt.deskNames" :key="imx">
          <el-text>{{ im }}</el-text>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ZTaiDialog">
import { ref } from "vue";
import { Goods } from "@/api/interface";

interface DialogProps {
  isView: boolean;
  row: Partial<Goods.ResGoodsCategoryList>;
}

const dialogVisible = ref(false);

const dialogProps = ref<DialogProps>({
  isView: false,
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: dialogProps) => {
  dialogProps.value = params;
  dialogVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>
<style lang="scss" scoped>
.tis {
  padding: 15px 20px;
  border-bottom: 1px var(--el-border-color-lighter) solid;
}
.text-Bold {
  font-weight: 600;
}
.dialog-box {
  height: 420px;
  overflow: hidden;
}
</style>
